<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
<!--构建画布-->
		<canvas id="myCanvas" width="1200" height="600" style="border: 1px solid;">
			
		</canvas>
		<script type="text/javascript">
			//获取画布
			var canvas = document.getElementById("myCanvas");
			//创建画笔
			var ctx = canvas.getContext("2d");
						var arcArr = [
			//				[20, 100, 20, 15, 0, "darksalmon"],
			//				[20, 100, 20, 9, 0, "mediumspringgreen"],
			//				[20, 100, 20, 6, 5, "powderblue"],
						]

			setInterval(function() {
				//利用for循环设置每秒喷出的求在30个
				for(var i = 0; i < 60; i++) {
					//x方向的速度
					var vx = Math.random() * 5;
					if(Math.random() > 0.5) {
						//设置x的不同方向，左右，正负
						vx = -vx;
					}
					//设置y的初速度，rgb代表不一样的颜色选择
					var vy = Math.random() * 10 + 5;
					var r = parseInt(Math.random() * 256);
					var g = parseInt(Math.random() * 256);
					var b = parseInt(Math.random() * 256);
					//喷出圆的设置，位置，半径，x速度，y速度，颜色选择,-y代表向上喷射
					arcArr.push([700, 300, 8, vx, -vy, "rgb(" + r + "," + g + "," + b + ")"]);
				}
//1000为1秒，一秒钟循环一次
			}, 1000);
			setInterval(function() {
				ctx.fillStyle = "rgba(255,220,178,0.5)";
				ctx.fillRect(0, 0, 1200, 600);

				for(var i = 0; i < arcArr.length; i++) {
					ctx.beginPath();
					ctx.fillStyle = arcArr[i][5];
					//ctx.fillStyle = "palegreen";
					//var arcX  =  arcArr[i][0];
					//var arcY =  arcArr[i][1];
					//var arcR  =  arcArr[i][2];
					//var arcVX  =  arcArr[i][3];
					//var arcVy =  arcArr[i][4];

					ctx.arc(arcArr[i][0], arcArr[i][1], arcArr[i][2], 0, 2 * Math.PI);
					ctx.fill();
					arcArr[i][0] = arcArr[i][0] + arcArr[i][3];
					arcArr[i][1] = arcArr[i][1] + arcArr[i][4];
					arcArr[i][4] = arcArr[i][4] + 0.5;
					//半径变小，并且随机变小
					arcArr[i][2] = arcArr[i][2]-Math.random()*0.1;
					if(arcArr[i][2]<Math.random()*5)
					{
						//splice作为清除语句，清除半径已经变为0，影响后面画圆
						arcArr.splice(i,1);
					}
					if(arcArr[i][1] > 600 - arcArr[i][2]) {
						arcArr[i][4] = -arcArr[i][4];
						//、、0.3为反弹系数
						arcArr[i][4] = arcArr[i][4] * 0.3;
						arcArr[i][1] = 600 - arcArr[i][2];
					}
					//					if(arcArr[i][0] > 1200 - arcArr[i][2]) {
					//						arcArr[i][3] = -arcArr[i][3];
					//						arcArr[i][0] = 1200 - arcArr[i][2];
					//					}
					//					if(arcArr[i][0] < arcArr[i][2]) {
					//						arcArr[i][3] = -arcArr[i][3];
					//						arcArr[i][0] = arcArr[i][2];
					//					}

				}
			}, 16)
		</script>
	</body>

</html>